<template>
    <div class="main-panel-container">
        <CountdownTimer :remain-time="remainTime" :is-over="isOver" @reduce-time="reduceTime"/>
        <div class="content">

            <div class="head">
                <div class="title">
                    "战疫情"应急点餐系统
                </div>
            </div>
            <div class="login-info">
                <div class="login-info-content">
                    <el-tag type="warning" class="department">{{$store.state.userInfo.department}}</el-tag>
                    <el-tag type="warning">{{$store.state.userInfo.name}}</el-tag>
                    <span class="time">{{todayDate}}</span>
                </div>

            </div>

            <div class="body">
                <OrderPanel v-for="(meal,index) of mealList"
                            :meal-info="meal"
                            :is-over="isOver"
                            :key="index"
                            @help-order-ok="helpOrderOk"
                            @order-change="orderMeal"
                />
            </div>

        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import OrderPanel from "@/components/OrderPanel.vue"
    import axios from "axios"
    import utils from "@/common/Utils"
    import UserOrder from "@/common/UserOrder"
    import MealInfo from "@/common/MealInfo"
    import {State, WhichMeal} from "@/common/type"
    import OrderState from "@/common/OrderState"
    import TodayOrdersState from "@/common/TodayOrdersState"
    import CountdownTimer from "@/components/CountdownTimer.vue"

    const breakfast: MealInfo = {
        day: '明日',
        mealName: '早餐',
        whichMeal: 0,
        state: 0,
        departmentOrderNum: 0,
        orderNames: [],
        wholeOrderNum: 0
    }

    const lunch: MealInfo = {
        day: '明日',
        mealName: '午餐',
        whichMeal: 1,
        state: 0,
        departmentOrderNum: 0,
        orderNames: [],
        wholeOrderNum: 0
    }

    const dinner: MealInfo = {
        day: '明日',
        mealName: '晚餐',
        whichMeal: 2,
        state: 0,
        departmentOrderNum: 0,
        orderNames: [],
        wholeOrderNum: 0
    }


    @Component({
        components: {CountdownTimer, OrderPanel}
    })
    export default class MainPanel extends Vue {

        todayDate = ''
        remainTime = 0

        get isOver(){
            return this.remainTime<0
        }

        mealList: MealInfo[] = [
            breakfast, lunch, dinner
        ]

        fullscreenLoading: any



        mounted() {
            //console.log('mounted')
            this.getAJAXTodayOrderState()
        }

        updated() {
            //console.log('updated')
            this.getAJAXTodayOrderState()
        }

        openFullLoading() {
            this.fullscreenLoading = this.$loading({
                lock: true,
                text: 'Loading',
                // spinner: 'el-icon-loading',
                // background: 'rgba(0, 0, 0, 0.7)'
            });
        }

        closeFullLoading() {
            this.fullscreenLoading.close()
            this.fullscreenLoading=null
        }

        getAJAXTodayOrderState() {

            //防止mounted与updated二次加载
            if (!this.fullscreenLoading) {
                this.openFullLoading()
                axios.get(
                    utils.getFullURL('/meal/' + this.$store.state.userInfo.id)
                ).then((resp) => {
                    console.log('get today order success')
                    this.refresh(resp.data as TodayOrdersState);

                }).catch(reson => {
                    //console.log(reson.response.data)
                    this.$message.error('系统错误，请刷新重试或联系管理员。。。   错误原因：' + reson.response.data.message);
                })

            }

        }


        refresh(todayOrdersState: TodayOrdersState) {
            this.closeFullLoading()
            this.setTime(todayOrdersState.date, todayOrdersState.weak)
            this.remainTime = todayOrdersState.remainTime
            this.setOrderList(todayOrdersState.orderStateList)
        }

        setTime(date: string, week: number) {
            const weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            this.todayDate = `${date} ${weekday[week]}`
        }

        setOrderList(orderStateList: OrderState[]) {
            if (orderStateList) {
                orderStateList.forEach(order => {
                    this.refreshOrderState(order)
                })
            }
        }


        orderMeal(whichMeal: WhichMeal, state: State) {
            const userOrder: UserOrder = {
                id: this.$store.state.userInfo.id,
                whichMeal: whichMeal,
                state: state
            }

            axios.post(
                utils.getFullURL('/meal/'),
                userOrder
            ).then((resp) => {
                //console.log('save success')
                this.refreshOrderState(resp.data as OrderState)
            }).catch(reson => {
                //console.log(reson.response.data)
                this.$message.error('系统错误，请刷新重试或联系管理员。。。   错误原因：' + reson.response.data.message);
            })
        }

        refreshOrderState(orderState: OrderState) {

            const currentMealInfo: MealInfo = this.mealList[orderState.whichMeal]
            currentMealInfo.state = orderState.state
            currentMealInfo.departmentOrderNum = orderState.finalOrderNum
            currentMealInfo.orderNames = orderState.orderNames
            currentMealInfo.wholeOrderNum = orderState.wholeOrderNum
        }

        reduceTime() {
            const oldTime: number = this.remainTime

            this.remainTime -= 1000 * 60

            if (oldTime >= 0 && this.remainTime < 0) {
                this.getAJAXTodayOrderState()

            }
        }


        helpOrderOk(){
            console.log('help')
            this.getAJAXTodayOrderState()
        }


    }
</script>

<style scoped lang="scss">
    .main-panel-container {
        height: 100%;


        .content {
            min-width: 320px;
            max-width: 380px;
            margin: 50px auto;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .head {
            .title {
                font-size: 30px;
                color: #303133;
                text-align: center;
                line-height: 80px;
            }


        }

        .login-info {
            height: 50px;

            .login-info-content {
                min-width: 100%;

                .department {
                    margin-right: 10px;
                }

                .time {
                    padding-top: 8px;
                    font-size: 20px;
                    float: right;
                }
            }
        }
    }

</style>